<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<!-- 4、调用组件标签 -->
			<user-component></user-component>
			<add-number-component><add-number-component>
		</div>
		
		<template id="userTemplate">
			<div>
				<a v-text="username"></a>
				<a v-text="age"></a>
			</div>
		</template>
		
		<template id="addNumberTemplate">
			<div>
				<a v-text="number"></a><br>
				<button type="button" v-on:click="addNumber()">增1</button>
				
			</div>
		</template>
		
		
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//2、定义局部组件user
			let user = {
				data: function(){
					return{
						username: "zhangsan",
						age: 18
					}
				},
				template: "#userTemplate",
				methods: {}
			}
			
			//定义局部组件addNumber
			let addNumber = {
				data: function(){
					return{
						number: 1
					}
				},
				template: "#addNumberTemplate",
				methods: {
					addNumber: function(){
						this.number = this.number +1 
					}
				}
			}
			
			
			const vue = new Vue({
				el: "#app",
				data: {},
				methods: {},
				mounted() {
					
				},
				//1、定义局部组件们
				components:{
					//3、在components，实现组件id和组件对象的绑定
					userComponent: user,
					addNumberComponent: addNumber
				}
			})
		</script>
		
	</body>
</html>
